<template>
  <div>
    <blog-header></blog-header>

    <el-form :model="loginInfoVo">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="mobile">
        <el-input type="text" v-model="loginInfoVo.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginInfoVo.password" auto-complete="off" placeholder="密码"></el-input>
        <el-button type="primary" @click.native.prevent="handleSubmit">登录</el-button>
      </el-form-item>
      <el-form-item>
        登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>
      </el-form-item>
    </el-form>
    <blog-footer></blog-footer>
  </div>
</template>

<script>
  import blogHeader from '@/components/common/BlogHeader.vue'
  import blogFooter from '@/components/common/BlogFooter.vue'
  import CryptoJS from 'crypto-js' //加密js


  export default {
    name: 'BlogLogin',
    // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
    components: { blogHeader, blogFooter },
    data () {
      return {
        loginInfoVo: { username: '', password: '' },
        responseResult: []
      }
    },
    methods: {
      handleSubmit() {
        var that = this;
        let loginParams = {
          username: this.loginInfoVo.username,
          password: this.loginInfoVo.password
        };
        that.$axios.post('/login',loginParams)
          .then(successResponse => {
            this.responseResult = JSON.stringify(successResponse.data)
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {})
      }
    }
  }
</script>

<style scoped>

</style>
